<template>
	<view class="content">
		<scroll-view :refresher-enabled="isUseRefresh" :refresher-threshold="100" refresher-default-style="white" :refresher-triggered="isFresh" refresher-background="#F2F2F2" @refresherrestore="onRestore" @refresherrefresh="scrollRefresh" @tap="changeIs" :enable-back-to-top="true" :show-scrollbar="false" :scroll-y="true" class="cola-message" :scroll-into-view="chatViewId">
			<!-- <view v-for="(item, index) in msgData" :key="index" :id="'id-'+item.time" class="cola-message__msg"> -->
			<view
				v-for="(msgItem, msgIndex) in selfMsgData"
				:key="msgIndex"
				:id="'id-' + msgItem[IDType]"
				:style="{ 'flex-direction': msgItem[dataKeys['userId']] == query['fromId'] ? 'row-reverse' : 'row' }"
				class="cola-message__msg__line"
			>
				<image class="cola-message__msg__line__photo" :src="msgItem[dataKeys['avator']]" mode=""></image>
				<view
					v-if="msgItem[dataKeys['message']]!=''"
					:class="[
						msgItem[dataKeys['userId']] == query['fromId'] ? 'self-body' : 'other-body',
						msgItem[dataKeys['userId']] == query['fromId'] ? 'msgBody-rg' : 'msgBody-lf'
					]"
				>
					{{ msgItem[dataKeys['message']] }}
				</view>
				<image @tap="imgTap(msgItem[dataKeys['img']])" v-else :src="msgItem[dataKeys['img']]" class="self-img" mode=""></image>
				<view class="isRead" v-if="msgItem[dataKeys['userId']] == query['fromId']">
					{{msgItem[dataKeys['read']] == '1'?'已读':'未读'}}
				</view>
			</view>
			<!-- </view> -->
		</scroll-view>
		<view :style="{'bottom':(keybordMove?'400':'0')+'rpx'}" class="bottom-keyboard">
			<view class="cola-keyboard">
				<!-- <image v-if="isUseVoice" src="" class="cola-keyboard__voice" mode=""></image> -->
				<u-icon size="50" name="mic"></u-icon>
				<view class="cola-keyboard__input" style="height: 80rpx;">
					<textarea style="width: 100%; padding-top: 20rpx; border-radius: 5rpx; min-height: 80rpx; max-height: 120rpx; background: #FFFFFF;" auto-height="true" @input="isAllNull" :focus="inputFocus" @tap="clickInput" @confirm="inputConfirm" :disabled="inputDisabled" v-model="text"></textarea>
				</view>
				<image @tap="moreButton(0)" src="https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/08/24/96c0de8d-6adc-4a4f-83be-c405802841b4.png"
				   style="width: 60rpx; height: 60rpx; margin: 0 10rpx;"></image>
				<u-icon v-if="text == null || isTextNUll == false" @tap="moreButton(1)" size="60" class="cola-keyboard__more" name="plus-circle"></u-icon>
				<button v-else type="primary" size="mini" style="padding: 0 20rpx; letter-spacing: 5rpx; white-space: nowrap; font-size: 28rpx;" @click="sendMessage">发送</button>
			</view>
		</view>
		<view :class="['bottom-more', {'flex-show-emoji': showFlexo == 1 }]" :style="{'height':(moreIsShow? '400' : '0')+'rpx'}">
			<view v-if="showFlexo == '1'" @tap="buttonClick(index)" v-for="(item,index) in moreFunction" :key="index" class="bottom-more__block">
				<view class="bottom-more__block__img">
					<image class="bottom-more__block__img__icon" v-if="item.img!==''" src="" mode=""></image>
					<u-icon :size="iconSize" class="bottom-more__block__img__icon" v-else :name="item.icon"></u-icon>
				</view>
				<text>
					{{item.name}}
				</text>
			</view>
			<swiper v-if="showFlexo == '0'" class="emoji-swiper" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'https://yuyitang.oss-cn-shenzhen.aliyuncs.com/emoji/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	/*
		* 接收值：
		* userId：用户的id
		* userIdName：用户ID的键名
		* IDType：设置要绑定的消息ID，滚动需要
		* msgName：消息数据的绑定键名
		* messageData：基础展示数据
		* updateMsg：更新的数据，对象形式
		* historyMsg：历史数据，对象或数组形式
		* moreFunction：更多功能的显示，数组对象形式
		* iconSize：图标显示大小，默认60rpx
		* isUseRefresh：是否开启下拉刷新
		* 
		* 
		* 数据：
		* text：文本框输入内容
		* chatViewId：如果超出当前屏幕，翻滚跟踪到最后一条
		* inputFocus：光标是否集中
		* inputDisabled：是否禁止使用输入框
		* TODO 没有语音输入
		* isUseVoice：是否使用语音输入
		* selfMsgData：内部的数据保存
		* moreIsShow：是否显示更多功能
		* keybordMove：输入框键盘动画
		* isFresh：是否触发下拉刷新
		* 
		* 
		* 功能：
		* moreClick：更多功能的点击项
		* sendMsg：发送消息
	*/
	props:{
		isUseRead:{
			type:Boolean,
			default:false
		},
		dataKeys:{
			type:Object,
			default:()=>({
				userId:'fromId',
				msgId:'id',
				name:'fromId',
				message:'content',
				img:'img',
				avator:'avator',
				read:'status'
			})
		},
		IDType:{
			type:String,
			default:'id'
		},
		msgName:{
			type:String,
			default:'message'
		},
		messageData:{
			type:Array,
			default:()=> []
		},
		updateMsg:{
			type:Object,
			default:()=>{}
		},
		historyMsg:{
			type:[Object,Array],
			default:()=>{}
		},
	},
	data() {
		return {
			query: {
				pageNum: 1,
				pageSize: 10,
				fromId: null, // 用户的编号
				toId: null,   // 对方编号
				type: 0, // 发送场景【0 -> 用户对接客服， 1 -> 客服对接客服， 2 -> 客服查看聊天记录】
			},
			text: '',  // 输入的参数变量
			isTextNUll: false,  // 参数是否全部为空格
			chatViewId: '',     // 如果超出当前屏幕，翻滚跟踪到最后一条
			inputFocus: false,  // 光标是否集中
			inputDisabled: false,  // 是否禁止使用输入框
			isUseVoice:true,      //  是否使用语音输入
			selfMsgData:[],  //内部的数据保存
			moreIsShow:false,   // 是否显示更多功能
			keybordMove:false,  // 输入框键盘动画
			isFresh:false,      // 是否触发下拉刷新
			freshing:false, 
			moreFunction: [   // 多功能数组
				{
					name:'照片',
					icon:'photo',
					img:''
				},{
					name:'拍摄',
					icon:'camera',
					img:''
				}
			], 
			iconSize: '60',   // 多功能图标大小
			isUseRefresh: true, // 下拉加载更多
			showFlexo: null,
			emojiList:[         // emoji表情
				[{
						"url": "emoji_0@2x.png",
						"alt": "[NO]"
					},
					{
						"url": "emoji_1@2x.png",
						"alt": "[OK]"
					},
					{
						"url": "emoji_2@2x.png",
						"alt": "[下雨]"
					},
					{
						"url": "emoji_3@2x.png",
						"alt": "[么么哒]"
					},
					{
						"url": "emoji_4@2x.png",
						"alt": "[乒乓]"
					},
					{
						"url": "emoji_5@2x.png",
						"alt": "[便便]"
					},
					{
						"url": "emoji_6@2x.png",
						"alt": "[信封]"
					},
					{
						"url": "emoji_7@2x.png",
						"alt": "[偷笑]"
					},
					{
						"url": "emoji_8@2x.png",
						"alt": "[傲慢]"
					},
					{
						"url": "emoji_9@2x.png",
						"alt": "[再见]"
					},
					{
						"url": "emoji_10@2x.png",
						"alt": "[冷汗]"
					},
					{
						"url": "emoji_11@2x.png",
						"alt": "[凋谢]"
					},
					{
						"url": "emoji_140@2x.png",
						"alt": "[鼓掌]"
					},
					{
						"url": "emoji_13@2x.png",
						"alt": "[删除]"
					},
					{
						"url": "emoji_14@2x.png",
						"alt": "[勾引]"
					},
					{
						"url": "emoji_15@2x.png",
						"alt": "[发呆]"
					},
					{
						"url": "emoji_16@2x.png",
						"alt": "[发抖]"
					},
					{
						"url": "emoji_17@2x.png",
						"alt": "[可怜]"
					},
					{
						"url": "emoji_18@2x.png",
						"alt": "[可爱]"
					},
					{
						"url": "emoji_19@2x.png",
						"alt": "[右哼哼]"
					},
					{
						"url": "emoji_20@2x.png",
						"alt": "[右太极]"
					},
					{
						"url": "emoji_21@2x.png",
						"alt": "[右车头]"
					},
					{
						"url": "emoji_22@2x.png",
						"alt": "[吐]"
					},
					{
						"url": "emoji_23@2x.png",
						"alt": "[吓]"
					}
				],
				[{
						"url": "emoji_24@2x.png",
						"alt": "[咒骂]"
					},
					{
						"url": "emoji_25@2x.png",
						"alt": "[咖啡]"
					},
					{
						"url": "emoji_26@2x.png",
						"alt": "[啤酒]"
					},
					{
						"url": "emoji_27@2x.png",
						"alt": "[嘘]"
					},
					{
						"url": "emoji_28@2x.png",
						"alt": "[回头]"
					},
					{
						"url": "emoji_29@2x.png",
						"alt": "[困]"
					},
					{
						"url": "emoji_30@2x.png",
						"alt": "[坏笑]"
					},
					{
						"url": "emoji_31@2x.png",
						"alt": "[多云]"
					},
					{
						"url": "emoji_32@2x.png",
						"alt": "[大兵]"
					},
					{
						"url": "emoji_33@2x.png",
						"alt": "[大哭]"
					},
					{
						"url": "emoji_34@2x.png",
						"alt": "[太阳]"
					},
					{
						"url": "emoji_35@2x.png",
						"alt": "[奋斗]"
					},
					{
						"url": "emoji_36@2x.png",
						"alt": "[奶瓶]"
					},
					{
						"url": "emoji_37@2x.png",
						"alt": "[委屈]"
					},
					{
						"url": "emoji_38@2x.png",
						"alt": "[害羞]"
					},
					{
						"url": "emoji_39@2x.png",
						"alt": "[尴尬]"
					},
					{
						"url": "emoji_40@2x.png",
						"alt": "[左哼哼]"
					},
					{
						"url": "emoji_41@2x.png",
						"alt": "[左太极]"
					},
					{
						"url": "emoji_42@2x.png",
						"alt": "[左车头]"
					},
					{
						"url": "emoji_43@2x.png",
						"alt": "[差劲]"
					},
					{
						"url": "emoji_44@2x.png",
						"alt": "[弱]"
					},
					{
						"url": "emoji_45@2x.png",
						"alt": "[强]"
					},
					{
						"url": "emoji_46@2x.png",
						"alt": "[彩带]"
					},
					{
						"url": "emoji_47@2x.png",
						"alt": "[彩球]"
					}
				],
				[{
						"url": "emoji_48@2x.png",
						"alt": "[得意]"
					},
					{
						"url": "emoji_49@2x.png",
						"alt": "[微笑]"
					},
					{
						"url": "emoji_50@2x.png",
						"alt": "[心碎了]"
					},
					{
						"url": "emoji_51@2x.png",
						"alt": "[快哭了]"
					},
					{
						"url": "emoji_52@2x.png",
						"alt": "[怄火]"
					},
					{
						"url": "emoji_53@2x.png",
						"alt": "[怒]"
					},
					{
						"url": "emoji_54@2x.png",
						"alt": "[惊恐]"
					},
					{
						"url": "emoji_55@2x.png",
						"alt": "[惊讶]"
					},
					{
						"url": "emoji_56@2x.png",
						"alt": "[憨笑]"
					},
					{
						"url": "emoji_141@2x.png",
						"alt": "[龇牙]"
					},
					{
						"url": "emoji_58@2x.png",
						"alt": "[打哈欠]"
					},
					{
						"url": "emoji_59@2x.png",
						"alt": "[抓狂]"
					},
					{
						"url": "emoji_60@2x.png",
						"alt": "[折磨]"
					},
					{
						"url": "emoji_61@2x.png",
						"alt": "[抠鼻]"
					},
					{
						"url": "emoji_62@2x.png",
						"alt": "[抱抱]"
					},
					{
						"url": "emoji_63@2x.png",
						"alt": "[抱拳]"
					},
					{
						"url": "emoji_64@2x.png",
						"alt": "[拳头]"
					},
					{
						"url": "emoji_65@2x.png",
						"alt": "[挥手]"
					},
					{
						"url": "emoji_66@2x.png",
						"alt": "[握手]"
					},
					{
						"url": "emoji_67@2x.png",
						"alt": "[撇嘴]"
					},
					{
						"url": "emoji_68@2x.png",
						"alt": "[擦汗]"
					},
					{
						"url": "emoji_69@2x.png",
						"alt": "[敲打]"
					},
					{
						"url": "emoji_70@2x.png",
						"alt": "[晕]"
					},
					{
						"url": "emoji_71@2x.png",
						"alt": "[月亮]"
					}
				],
				[{
						"url": "emoji_72@2x.png",
						"alt": "[棒棒糖]"
					},
					{
						"url": "emoji_73@2x.png",
						"alt": "[汽车]"
					},
					{
						"url": "emoji_74@2x.png",
						"alt": "[沙发]"
					},
					{
						"url": "emoji_75@2x.png",
						"alt": "[流汗]"
					},
					{
						"url": "emoji_76@2x.png",
						"alt": "[流泪]"
					},
					{
						"url": "emoji_77@2x.png",
						"alt": "[激动]"
					},
					{
						"url": "emoji_78@2x.png",
						"alt": "[灯泡]"
					},
					{
						"url": "emoji_79@2x.png",
						"alt": "[炸弹]"
					},
					{
						"url": "emoji_80@2x.png",
						"alt": "[熊猫]"
					},
					{
						"url": "emoji_81@2x.png",
						"alt": "[爆筋]"
					},
					{
						"url": "emoji_82@2x.png",
						"alt": "[爱你]"
					},
					{
						"url": "emoji_83@2x.png",
						"alt": "[爱心]"
					},
					{
						"url": "emoji_84@2x.png",
						"alt": "[爱情]"
					},
					{
						"url": "emoji_85@2x.png",
						"alt": "[猪头]"
					},
					{
						"url": "emoji_86@2x.png",
						"alt": "[猫咪]"
					},
					{
						"url": "emoji_87@2x.png",
						"alt": "[献吻]"
					},
					{
						"url": "emoji_88@2x.png",
						"alt": "[玫瑰]"
					},
					{
						"url": "emoji_89@2x.png",
						"alt": "[瓢虫]"
					},
					{
						"url": "emoji_90@2x.png",
						"alt": "[疑问]"
					},
					{
						"url": "emoji_91@2x.png",
						"alt": "[白眼]"
					},
					{
						"url": "emoji_92@2x.png",
						"alt": "[皮球]"
					},
					{
						"url": "emoji_93@2x.png",
						"alt": "[睡觉]"
					},
					{
						"url": "emoji_94@2x.png",
						"alt": "[磕头]"
					},
					{
						"url": "emoji_95@2x.png",
						"alt": "[示爱]"
					}
				],
				[{
						"url": "emoji_96@2x.png",
						"alt": "[礼品袋]"
					},
					{
						"url": "emoji_97@2x.png",
						"alt": "[礼物]"
					},
					{
						"url": "emoji_98@2x.png",
						"alt": "[篮球]"
					},
					{
						"url": "emoji_99@2x.png",
						"alt": "[米饭]"
					},
					{
						"url": "emoji_100@2x.png",
						"alt": "[糗大了]"
					},
					{
						"url": "emoji_101@2x.png",
						"alt": "[红双喜]"
					},
					{
						"url": "emoji_102@2x.png",
						"alt": "[红灯笼]"
					},
					{
						"url": "emoji_103@2x.png",
						"alt": "[纸巾]"
					},
					{
						"url": "emoji_104@2x.png",
						"alt": "[胜利]"
					},
					{
						"url": "emoji_105@2x.png",
						"alt": "[色]"
					},
					{
						"url": "emoji_106@2x.png",
						"alt": "[药]"
					},
					{
						"url": "emoji_138@2x.png",
						"alt": "[麦克风]"
					},
					{
						"url": "emoji_108@2x.png",
						"alt": "[蛋糕]"
					},
					{
						"url": "emoji_109@2x.png",
						"alt": "[蜡烛]"
					},
					{
						"url": "emoji_110@2x.png",
						"alt": "[街舞]"
					},
					{
						"url": "emoji_111@2x.png",
						"alt": "[衰]"
					},
					{
						"url": "emoji_112@2x.png",
						"alt": "[西瓜]"
					},
					{
						"url": "emoji_113@2x.png",
						"alt": "[调皮]"
					},
					{
						"url": "emoji_114@2x.png",
						"alt": "[象棋]"
					},
					{
						"url": "emoji_115@2x.png",
						"alt": "[跳绳]"
					},
					{
						"url": "emoji_116@2x.png",
						"alt": "[跳跳]"
					},
					{
						"url": "emoji_117@2x.png",
						"alt": "[车厢]"
					},
					{
						"url": "emoji_118@2x.png",
						"alt": "[转圈]"
					},
					{
						"url": "emoji_119@2x.png",
						"alt": "[鄙视]"
					}
				],
				[
			
					{
						"url": "emoji_120@2x.png",
						"alt": "[酷]"
					},
					{
						"url": "emoji_121@2x.png",
						"alt": "[钞票]"
					},
					{
						"url": "emoji_122@2x.png",
						"alt": "[钻戒]"
					},
					{
						"url": "emoji_123@2x.png",
						"alt": "[闪电]"
					},
					{
						"url": "emoji_124@2x.png",
						"alt": "[闭嘴]"
					},
					{
						"url": "emoji_125@2x.png",
						"alt": "[闹钟]"
					},
					{
						"url": "emoji_126@2x.png",
						"alt": "[阴险]"
					},
					{
						"url": "emoji_127@2x.png",
						"alt": "[难过]"
					},
					{
						"url": "emoji_128@2x.png",
						"alt": "[雨伞]"
					},
					{
						"url": "emoji_129@2x.png",
						"alt": "[青蛙]"
					},
					{
						"url": "emoji_130@2x.png",
						"alt": "[面条]"
					},
					{
						"url": "emoji_131@2x.png",
						"alt": "[鞭炮]"
					},
					{
						"url": "emoji_132@2x.png",
						"alt": "[风车]"
					},
					{
						"url": "emoji_133@2x.png",
						"alt": "[飞吻]"
					},
					{
						"url": "emoji_134@2x.png",
						"alt": "[飞机]"
					},
					{
						"url": "emoji_135@2x.png",
						"alt": "[饥饿]"
					},
					{
						"url": "emoji_136@2x.png",
						"alt": "[香蕉]"
					},
					{
						"url": "emoji_137@2x.png",
						"alt": "[骷髅]"
					}
				]
			],
		};
	},
	onLoad(e) {
		this.query.fromId = e.id
		this.query.toId = e.peerId
		/* websocket长链接 */
		uni.connectSocket({
			url: 'ws://192.168.3.109:8085/websocket/user/' + e.id,
			success: res => {
				console.log("建立连接", res);
			}
		})
		uni.onSocketOpen(function (res) {
		  console.log('WebSocket建立连接成功！', res);
		});
		uni.onSocketMessage(function (res) {
			console.log('服务器返回的消息：', res)
		})
		
		
		// 获取聊天数据
		this.getMessageList()
		
	},
	mounted() {
		/*
		userId:'101',
		msgId: Math.random().toFixed(4)*10000,
		name: '我的大聪明啊',
		message: '',
		img:'https://iknow-pic.cdn.bcebos.com/d833c895d143ad4bb4400a7d8c025aafa40f0624',
		avator: ''
		*/
		// this.selfMsgData = this.fixSelfData(JSON.parse(JSON.stringify(this.messageData)))
	},
	watch:{
		updateMsg:{
			handler(val){
				if(Object.keys(val)===0){
					return
				}
				this.selfMsgData.push(this.fixSelfData(val))
				this.setScroll();
			},
			// immediate:true,
			deep:true
		},
		historyMsg:{
			handler(val,oldVal){
				if(val===oldVal){
					return
				}
				setTimeout(()=>{
					this.isFresh=false
					this.freshing=false
				},500)
				const valueType = Object.prototype.toString.call(val);
				if(valueType==='[object Object]'){
					this.selfMsgData.unshift(val)
				}else if(valueType==='[object Array]'){
					// val = val.reverse()
					val = this.fixSelfData(val)
					const len = val.length
					let num = 0
					for(num;num<len;num++){
						this.selfMsgData.unshift(val[num])
					}
				}
			},
			immediate:true,
			deep:true
		}
	},
	methods: {
		// 发送信息
		sendMessage() {
			const data = {
				fromId: this.query.fromId,
				toId: this.query.toId,
				type: 0,
				sendType: 0,
				content: this.text,
				createTime: new Date().getTime()
			}
			// uni.sendSocketMessage({
			// 	data: JSON.stringify(data)
			// 	success: res => {
					
			// 	}
			// })
			this.text = ""
		},
		// 获取聊天数据
		getMessageList(memberId, shopId){
			this.$api.request.getMessageList(this.query, res => {
				if(res.code == 200){
					console.log(res);
					this.selfMsgData = this.fixSelfData(JSON.parse(JSON.stringify(res.data.records)))
				}
			})
		},
		//添加表情
		addEmoji(em) {
			this.text += em.alt;
		},
		scrollRefresh(e){
			 if (this.freshing) return;
			 this.freshing = true;
			 this.isFresh=true;
			 this.$emit('refresh');
		},
		onRestore(){
			this.isFresh='restore'
		},
		changeIs(){
			this.moreIsShow=false
			this.keybordMove=false
		},
		voiceLong(){
			console.log('录音')
		},
		clickInput() {
			this.inputFocus = false;
		},
		// 监听输入的参数
		isAllNull(){
			// 判断非空
			let test = this.text.trim()
			if(test == null || test == '' || test == undefined){
				return this.isTextNUll =  false
			}
			return this.isTextNUll =  true
		},
		inputConfirm() {
			// if(this.text===''){
			// 	return
			// }
			// this.inputFocus=false
			// this.$emit('sendMsg',this.text)
			// this.text=''
			// this.inputFocus = true;
		},
		setScroll() {
			let len = this.selfMsgData.length - 1;
			const id = this.selfMsgData[len][this.IDType];
			// 我这里的id的设置规则是自己想的
			// 只要不会重复 并且不事纯number就行
			this.chatViewId = 'id-' + id;
			// #ifdef H5
			uni.pageScrollTo({
				selector:'#'+this.chatViewId
			})
			// #endif
		},
		imgTap(img){
			uni.previewImage({
			    urls: [img],
			    longPressActions: {
			        itemList: ['发送给朋友', '保存图片', '收藏'],
			        success: function(data) {
			            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			        },
			        fail: function(err) {
			            console.log(err.errMsg);
			        }
			    }
			});
		},
		moreButton(index){
			// 【0 -> 表情，1 -> 多功能】
			if(index == '0'){
				this.showFlexo = 0
			}else{
				this.iconSize = '60'
				this.showFlexo = 1
			}
			uni.hideKeyboard()
			this.keybordMove=true
			this.moreIsShow=true
		},
		buttonClick(index){
			this.$emit('moreClick',index)
		},
		fixSelfData(arr){
			let keyArr = Object.keys(this.dataKeys)
			let valueArr = Object.values(this.dataKeys)
			const valueType = Object.prototype.toString.call(arr);
			if(valueType==='[object Object]'){
				let resultObj = {}
				keyArr.forEach((keyItem,keyIndex)=>{
					resultObj[valueArr[keyIndex]] = arr[valueArr[keyIndex]]
				})
				return resultObj
			}else if(valueType==='[object Array]'){
				let resultArr = []
				arr.forEach((item,index)=>{
					let resultObj = {}
					keyArr.forEach((keyItem,keyIndex)=>{
						resultObj[valueArr[keyIndex]] = item[valueArr[keyIndex]]
					})
					resultArr.push(resultObj)
				})
				return resultArr
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.self-body {
		color: #fff;
		background-color: #19be6b;
	}
	.other-body {
		color: #000000;
		background-color: #fff;
	}
	@mixin msgBody {
		max-width: 62%;
		padding: 15rpx;
		margin: 0 30rpx;
		border-radius: 10rpx;
		position: relative;
		word-spacing: normal;
		word-break:break-all;
		word-wrap:break-word;
	}
	.content {
		width: 100vw;
		height: 100vh;
		.cola-message {
			width: 100%;
			height: calc(100vh - 140rpx);
			padding: 30rpx;
			background-color: #f2f2f2;
			box-sizing: border-box;
			&__msg {
				width: 100%;
				min-height: 40rpx;
				&__line {
					width: 100%;
					display: flex;
					align-items: flex-start;
					position: relative;
					&:nth-child(n + 2) {
						margin-top: 40rpx;
					}
					.self-img{
						width: 340rpx;
						height: 260rpx;
						margin: 0 30rpx;
						border-radius: 10rpx;
					}
					&__photo {
						width: 100rpx;
						height: 100rpx;
						background-color: red;
						border-radius: 10rpx;
					}
					.msgBody-lf {
						@include msgBody()
						
						&::before {
							position: absolute;
							content: '';
							width: 0;
							height: 0;
							overflow: hidden;
							border: 15rpx solid transparent;
							border-right-color: #fff;
							left: -26rpx;
							top: 20rpx;
						}
					}
					.msgBody-rg{
						@include msgBody()
						
						&::before {
							position: absolute;
							content: '';
							width: 0;
							height: 0;
							overflow: hidden;
							border: 15rpx solid transparent;
							border-left-color: #19BE6B;
							right: -26rpx;
							top: 20rpx;
						}
					}
					.isRead{
						font-size: 24rpx;
						color: #B2B2B2;
					}
					.noRead{
						font-size: 24rpx;
						color: #00bc43;
					}
				}
			}
		}
		.bottom-keyboard{
			width: 92%;
			min-height: 140rpx;
			padding: 30rpx 30rpx 0 30rpx;
			padding-bottom: constant(safe-area-inset-bottom); // 核心代码
			padding-bottom: env(safe-area-inset-bottom); // 核心代码
			background-color: #f6f6f6;
			position: fixed;
			bottom: 0;
			left: 0;
			transition: bottom 0.5s;
			z-index: 99;
			.cola-keyboard {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				&__voice {
					width: 60rpx;
					height: 60rpx;
					background-color: blue;
				}
				&__input {
					// margin-left: 30rpx;
					height: 100%;
					width: 70%;
					// padding: 0 20rpx;
					background-color: #fff;
					border-radius: 10rpx;
					box-sizing: border-box;
				}
				&__expression {
					// width: 60rpx;
					// height: 60rpx;
					// margin-left: 30rpx;
				}
				&__more {
					// width: 60rpx;
					// height: 60rpx;
					// margin-left: 30rpx;
				}
			}
		}
		.bottom-more{
			width: 92%;
			padding: 0 30rpx;			
			position: fixed;
			bottom: 0;
			left: 0;
			transition: height 0.5s;
			background-color: #F6F6F6;
			&__block{
				width: 120rpx;
				height: 200rpx;
				margin-top: 5rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				&:nth-child(n+2){
					margin: 5rpx 0 0 32rpx;
				}
				&__img{
					width: 120rpx;
					height: 120rpx;
					line-height: 150rpx;
					text-align: center;
					background-color: #FFF;
					border-radius: 20rpx;
				}
				text{
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #848588;
				}
			}
			&::after{
				display: block;
				content: '';
				flex: 1;
			}
		}
	}
	
	.flex-show-emoji{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.emoji-swiper {
		height: 65vw;
	
		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
	
			view {
				width: 15vw;
				height: 13vw;
				display: flex;
				justify-content: center;
				align-items: center;
	
				image {
					width: 9vw;
					height: 9vw;
				}
			}
		}
	}
</style>
